﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水波</title>
<script src="js/TweenMax.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
	<div id="container">
  		<div id="water"></div>
	</div>
	<svg xlmns="http://www.w3.org/2000/svg" version="1.1">
  		<filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
  		<!-- turbulence 湍流  fractalNoise 分形噪波 -->
    		<feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
    		<feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
  		</filter>
	</svg>
</body>
<script>
	let timeline = new TimelineMax({repeat: -1,yoyo: true});
	let feTurb = document.querySelector('#feturbulence');
	timeline.add(
		TweenMax.to(feTurb, 8, {
  			onUpdate: function () {
    				let bfX = this.progress() * 0.005 + 0.015, //base frequency x
    					bfY = this.progress() * 0.05 + 0.1; //base frequency y
    					feTurb.setAttribute('baseFrequency', `${bfX} ${bfY}`);
  					}
		}),
	0);
</script>
</html>

